<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="css/reg.css">
    <title>登录账号</title>
</head>
<body>
<!--<img class="reg-img" src="./img/people.png">-->

<div class="reg-group">
    <div class="reg-text">登录华迅直购的账号</div>
    <button class="active" id="login" onclick="login()">登录账号</button>
    <button class="margin-left" id="sign" onclick="sign()">注册账号</button>
</div>
<!--绑定账号-->
<div id="login-container">
    <input class="reg-input" id="login_username" type="text" placeholder="账号">
    <input class="reg-input" id="login_password" type="password" placeholder="密码">
    <div class="reg-button">
        <button onclick="bind_login()">登录</button>
        <input type="hidden" id="next_url" value="{{ next_url }}">
        <input type="hidden" id="code" value="{{ code }}">
        <input type="hidden" id="program_id" value="{{ program_id }}">
    </div>
</div>
<!--注册账号-->
<div id="sign-container">
    <input class="reg-input" id="reg_username" type="text" placeholder="账号">
    <div class="error" id="reg_username_error">用户名为4~18位，不能为纯数字</div>
    <div class="error" id="reg_username_error2">账号不能为空</div>
    <input class="reg-input" id="reg_password" type="password" placeholder="密码">
    <div class="error" id="reg_password_error">密码长度为6~18位</div>
    <div class="error" id="reg_password_error2">密码不能为空</div>
    <input class="reg-input" id="reg_password2" type="password" placeholder="确认密码">
    <div class="error" id="reg_password2_error">密码不一致</div>
    <div class="reg-button">
        <button onclick="bind_reg()">注册</button>
    </div>
</div>
<div class="error">{{ message }}</div>
<script>
    function login() {
        document.getElementById("login").setAttribute("class", "active");
        document.getElementById("sign").setAttribute("class", "margin-left");
        document.getElementById("login-container").style.display = "block";
        document.getElementById("sign-container").style.display = "none";

    }

    function sign() {
        document.getElementById("login").setAttribute("class", "");
        document.getElementById("sign").setAttribute("class", "margin-left active");
        document.getElementById("sign-container").style.display = "block";
        document.getElementById("login-container").style.display = "none";
    }

    function getEbyId(eid) {
        return document.getElementById(eid).value;
    }

    function bind_login() {
        var next_url = getEbyId('next_url');
        var code = getEbyId('code');
        var program_id = getEbyId('program_id');
        var login_username = getEbyId('login_username');
        var login_password = getEbyId('login_password');

        location.href = '/sys/oauth2?type=login&code=' + code + '&username=' + login_username + '&password=' + login_password + '&program_id=' + program_id + '&next_url=' + next_url;
    }

//    function bind_reg() {
//        var next_url = getEbyId('next_url');
//        var code = getEbyId('code');
//
//        var program_id = getEbyId('program_id');
//        var reg_username = getEbyId('reg_username');
//        var reg_password = getEbyId('reg_password');
//        var reg_password2 = getEbyId('reg_password2');
//        location.href = '/sys/oauth2?type=reg&code=' + code + '&username=' + reg_username + '&password=' + reg_password + '&program_id=' + program_id + '&next_url=' + next_url;
//
//    }

    var jmz = {};
    jmz.GetLength = function (str) {
        ///<summary>获得字符串实际长度，中文2，英文1</summary>
        ///<param name="str">要获得长度的字符串</param>
        var realLength = 0, len = str.length, charCode = -1;
        for (var i = 0; i < len; i++) {
            charCode = str.charCodeAt(i);
            if (charCode >= 0 && charCode <= 128) realLength += 1;
            else realLength += 2;
        }
        return realLength;
    };

    function bind_reg() {
        var check = true;

        var next_url = getEbyId('next_url');
        var code = getEbyId('code');

        var program_id = getEbyId('program_id');
        var reg_username = getEbyId('reg_username');
        var reg_password = getEbyId('reg_password');
        var reg_password2 = getEbyId('reg_password2');

        if(reg_username){
            if (jmz.GetLength(reg_username) < 4 || jmz.GetLength(reg_username) > 18) {
                document.getElementById("reg_username_error").style.display = "block";
                document.getElementById("reg_username_error2").style.display = "none";

                check = false;
            }else{
                document.getElementById("reg_username_error").style.display = "none";
                document.getElementById("reg_username_error2").style.display = "none";
            }
        }else {
            document.getElementById("reg_username_error").style.display = "none";
            document.getElementById("reg_username_error2").style.display = "block";
            check = false;
        }
        if(reg_password){
            if (jmz.GetLength(reg_password) < 6 || jmz.GetLength(reg_password) > 18) {
                document.getElementById("reg_password_error").style.display = "block";
                document.getElementById("reg_password_error2").style.display = "none";
                check = false;
            }else{
                document.getElementById("reg_password_error").style.display = "none";
                document.getElementById("reg_password_error2").style.display = "none";
            }
        }else{
            document.getElementById("reg_password_error2").style.display = "block";
            document.getElementById("reg_password_error").style.display = "none";
            check = false;
        }
        if (reg_password2) {
            if (!reg_password === reg_password2) {
                document.getElementById("reg_password2_error").style.display = "block";
                check = false;
            }else{
                document.getElementById("reg_password2_error").style.display = "none";
            }
        }else{
            document.getElementById("reg_password2_error").style.display = "block";
            check = false;
        }

        if(check){
            location.href = '/sys/oauth2?type=reg&code='+code+'&username='+reg_username+'&password='+reg_password+'&program_id='+program_id+'&next_url='+next_url;
        }
    }


</script>
</body>
</html>